<template>
		<view class="cate_total_main" :style="{'--color':vuex_config.themeColor1}">
			<cate-list :dataList="firstList" :levelIndex="0" @change="clickChange" :currentSelect="currentCate[optionObj.checkName[0]]"></cate-list>
			<block v-for="(item,index) in ableList" :key="index">
				<block v-if="item.arr.length > 0">
					<view class="title" @click="see(index)">{{item.title}}</view>
					<cate-list :dataList="item.arr" :levelIndex="index + 1" @change="clickChange" :currentSelect="currentCate[optionObj.checkName[index + 1]]"></cate-list>
				</block>
			</block>
		</view>
</template>

<script>
	import cateList from './component/cateList.vue'
export default {
	props: {
		firstList:{
			type:Array,
			default:[]
		}, // 一级分类列表
		optionObj: {
			type: Object,
			default: () => {
				return {};
			}
		},
		showVisible: {
			type: Boolean,
			default: false
		}
	},
	components:{
		'cate-list':cateList
	},
	data() {
		return {
			// checkName:['one_type','two_type'],
			// searchType:1,// 分类的搜索类型
			currentCate:{}, // 当前已选的等级对象
			ableList:[], // 可选的分类数组 （除开第一级）
		};
	},

	methods: {
		see (index) {
			console.log('xxx',this.currentCate.two_type)
		},
		// 点击分类(父级也会调用此方法)
		clickChange (obj) {
			let item = obj.item
			let index = obj.index
			let checkName = this.optionObj.checkName
			let newObj = this.currentCate[checkName[index]]
			if(checkName.length == 1){
				if(!newObj || newObj.pk_id !== item.pk_id){
					// 1. 修改当前所选的
					this.currentCate[checkName[0]] = {
						...item
					}
					this.ableList.splice(this.ableList.length) // 不加这个，currentCate就无法响应渲染到元素上
					if(obj.isInit){/*第一次初始化，后面的动作不需要执行*/
						return
					}
					this.$emit('changClass',this.currentCate)
				}
			}else{
				if(!newObj || newObj.pk_id != item.pk_id){ // 当前没有选择，或跟当前所选的不一样
					// 1. 修改当前所选的
					this.currentCate[checkName[index]] = {
						...item
					}
					// 2. 去掉当前等级的所有已选中的下级
					if(checkName.length - 1 > index){
						let newArr = checkName.slice(index + 1)
						newArr.forEach((nextKey)=>{
							if(this.currentCate[nextKey]){
								this.currentCate[nextKey] = null
							}
						})
					}
					this.ableList.splice(this.ableList.length) // 不加这个，currentCate就无法响应渲染到元素上
					if(obj.isInit){/*第一次初始化，后面的动作不需要执行*/
						return
					}
					// 3. 判断是否需要加载下一级
					if(index < (checkName.length - 1)){
						// 1. 把之前加载的当前分类以下的分类列表去掉
						if(this.ableList.length > index){
							this.ableList.splice(index)
						}
						// 2. 加载下一级
						if(item.pk_id > 0){/*如果点击的时全部*/
							this.getClassList(item.pk_id)
						}
					}
					this.$emit('changClass',this.currentCate)
				}
			}
		},
		// 获取某一级的下级分类
		getClassList (parent) {
			this.$resPost('GetCommonClassify', { type: this.optionObj.searchType, parent_id: parent, page_size: 100 }).then(({ data }) => {
				this.ableList.push(
					{
						title:'标题',
						arr:data
					}
				)
			});
		},
		close () {
			this.$emit('input',false)
		}
	}
};
</script>

<style scoped lang="scss">
.title{
	font-weight: bold;
	padding: 30rpx;
	font-size: 32rpx;
}

</style>
